<template>
  <div class="PaperTitle" v-loading="loading">
    <div class="box" :style="{ height: Height + 'px' }">
      <div class="text">{{ $t("register.Welcome") }}</div>
      <div class="login">
        <div class="title">{{ $t("register.SIGN") }}</div>
        <div class="boxOne">
          <div class="box_ok"><span v-if="ok1">ok</span></div>
          <div class="btnOne cursor" @click="buttonFn1">
            {{ $t("register.Check") }}
          </div>
          <el-input
            label=""
            :placeholder="$t('register.Enter')"
            v-model="query.user_code"
          >
          </el-input>
          <span class="spanOne">{{ $t("register.You") }}</span>
          <div class="title_text">{{ $t("register.Please") }}</div>
        </div>
        <div class="boxTwo">
          <el-input
            label=""
            :placeholder="$t('register.EnterEMail')"
            v-model="query.email"
          >
          </el-input>
          <span class="spanTwo">{{ $t("register.EMail") }}</span>
        </div>
        <div class="boxThree">
          <el-input
            label=""
            :placeholder="$t('register.EnterName')"
            v-model="query.user_name"
          >
          </el-input>
          <span class="spanTwo">{{ $t("register.Name") }}</span>
        </div>
        <div class="boxFour">
          <el-input
            :placeholder="$t('register.EnterPassword')"
            v-model="query.user_password"
            show-password
          >
          </el-input>
          <span class="spanThree">{{ $t("register.Password") }}</span>
        </div>
        <div class="boxFive">
          <el-input
            :placeholder="$t('register.Enterpasswordconfirmation')"
            v-model="input"
            @input="inputBnt()"
             show-password
          >
          </el-input>
        </div>
        <div class="boxFive">
          <el-input
            class="inputSix"
            placeholder="18709982345"
            v-model="query.phone"
          >
          </el-input>
          <el-select class="inputSixs" v-model="query.code" placeholder="86">
            <el-option
              v-for="(item, index) in countryData"
              :key="index"
              :label="item.CNName"
              :value="item.CNName"
              @click.native="changeFn(item)"
            >
            </el-option>
          </el-select>
        </div>
        <div class="boxSix">
          <div class="box_ok"><span v-if="ok2">ok</span></div>
          <div class="btnOne cursor" @click="buttonFn2">
            {{ $t("register.Check") }}
          </div>
          <el-input
            label=""
            :placeholder="$t('register.EnterReferrallD')"
            v-model="query.parent_code"
          >
          </el-input>
          <span class="spanOne">{{ $t("register.ReferralID") }}</span>
        </div>
        <div class="boxSeven">
          <div class="box_ok"><span v-if="ok3">ok</span></div>
          <div class="btnOne cursor" @click="buttonFn3">
            {{ $t("register.Check") }}
          </div>
          <el-input
            class="inputboxSeven"
            placeholder="1870"
            v-model="inputs.input1"
            @paste.native.capture.prevent="handlePaste"
          >
          </el-input>
          <el-input
            class="inputboxSeven"
            placeholder="1870"
            v-model="inputs.input2"
            @paste.native.capture.prevent="handlePaste"
          >
          </el-input>
          <el-input
            class="inputboxSeven"
            placeholder="1870"
            v-model="inputs.input3"
            @paste.native.capture.prevent="handlePaste"
          >
          </el-input>
          <el-input
            class="inputboxSeven"
            placeholder="1870"
            v-model="inputs.input4"
            @paste.native.capture.prevent="handlePaste"
          >
          </el-input>
          <span class="spanOne">{{ $t("register.vouchercode") }}</span>
        </div>
        <div class="btn cursor" @click="sumbitFn">
          {{ $t("register.Submit") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countryData from "./countryData";
import { register, check } from "@/api/login.js"; // 注册接口  注册核实
export default {
  name: "register",
  components: {},
  data() {
    return {
      Height: null,
      loading: false, // loading
      countryData, // 国家数据
      ok1: false, // 判断第一个ok是否展示
      ok2: false, // 判断第二个ok是否展示
      ok3: false, // 判断第三个ok是否展示
      changeOk1: false, // 判断第一个ok是否展示
      changeOk2: false, // 判断第二个ok是否展示
      changeOk3: false, // 判断第三个ok是否展示
      input: "", // 用来判断两次密码一样不
      inputChange: false, // 用来判断密码是否一样
      input1: "",
      inputs: {
        input1: "",
        input2: "",
        input3: "",
        input4: "",
      },
      values: "",
      value: 86, // 国家号码
      query: {
        user_code: "", // 用户账号
        user_name: "", // 用户姓名
        user_password: "", // 密码
        phone: "", // 手机号
        code: "", // 国家号码
        email: "",
        voucher_code: "", // 16位推荐码
        parent_code: "", // 推荐人用户账号
      },
      codeQuery: {
        user_code: "", // 账户code
        parent_code: "", // 父级账户
        voucher_code: "", // 16位推荐码
      },
    };
  },
  created() {
    this.Height = sessionStorage.getItem("heights");
  },
  methods: {
    handlePaste(e) {
      let clip = e.clipboardData.getData("Text");
      console.log(clip, "clip");
      if (clip.length == 16) {
        this.inputs.input4 = clip.substr(0, 4);
        this.inputs.input3 = clip.substr(4, 4);
        this.inputs.input2 = clip.substr(8, 4);
        this.inputs.input1 = clip.substr(12, 4);
      }
    },
    changeFn(item) {
      console.log(item);
      this.query.code = item.dialCode;
      console.log(this.query.code);
    },
    sumbitFn() {
      this.query.voucher_code =
        this.inputs.input4 +
        this.inputs.input3 +
        this.inputs.input2 +
        this.inputs.input1;
      this.register(this.query);
    },
    // 注册核实
    async check(query) {
      try {
        const data = await check(query);
        if (data.result_code == 200) {
          if (this.changeOk1 == true) {
            this.ok1 = true;
          } else if (this.changeOk2 == true) {
            this.ok2 = true;
          } else if (this.changeOk3 == true) {
            this.ok3 = true;
          }
        } else {
          this.$message({
            type: "error",
            message: data.msg,
          });
        }
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 注册接口
    async register(query) {
      this.loading = true;
      try {
        const data = await register(query);
        if (data.result_code == 200) {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$router.push({
            path: "/login",
          });
        } else {
          console.log(1);
          this.$message({
            type: "error",
            message: data.msg,
          });
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    // check1查询按钮
    buttonFn1() {
      this.codeQuery = {
        user_code: this.query.user_code, // 账户code
        parent_code: "", // 父级账户
        voucher_code: "", // 16位推荐码
      };
      this.changeOk1 = true;
      this.changeOk2 = false;
      this.changeOk3 = false;
      this.check(this.codeQuery);
    },
    // check2查询按钮
    buttonFn2() {
      this.codeQuery = {
        user_code: "", // 账户code
        parent_code: this.query.parent_code, // 父级账户
        voucher_code: "", // 16位推荐码
      };
      this.changeOk1 = false;
      this.changeOk2 = true;
      this.changeOk3 = false;
      this.check(this.codeQuery);
    },
    // check3查询按钮
    buttonFn3() {
      this.codeQuery = {
        user_code: "", // 账户code
        parent_code: "", // 父级账户
        voucher_code:
          this.inputs.input4 +
          this.inputs.input3 +
          this.inputs.input2 +
          this.inputs.input1, // 16位推荐码
      };
      this.changeOk1 = false;
      this.changeOk2 = false;
      this.changeOk3 = true;
      this.check(this.codeQuery);
    },
    // 用来判断两次密码一样不
    inputBnt(value) {
      console.log(value, 99);
    },
  },
};
</script>

<style  lang="scss" scoped>
@media only screen and (max-width: 768px) {
  .PaperTitle {
    font-size: 40px;
  }
}
::-webkit-scrollbar {
  width: 7px;
}
@media only screen and (min-width: 800px) {
  .PaperTitle {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .box {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    background: url("~@/assets/imgs/bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .text {
    box-sizing: border-box;
    width: 512px;
    height: 127px;
    font-size: 50px;
    font-weight: bold;
    color: #ffffff;
    line-height: 80px;
    margin: 51px 0 0 232px;
  }
  .login {
    position: absolute;
    top: 51px;
    right: 232px;
    box-sizing: border-box;
    width: 817px;
    height: 829px;
    background: #ffffff;
    border-radius: 30px;
  }
  .title {
    margin: 20px 0 0 102px;
    width: 445px;
    font-size: 48px;
    font-weight: bold;
    color: #1a1a1a;
  }
  .title_text {
    margin: 20px 0 0 105px;
    height: 17px;
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    color: #eb0202;
  }
  .boxOne {
    margin: 32px 0 0 102px;
    width: 692px;
    height: 55px;
  }
  .box_ok {
    float: right;
    margin: 5px 0 0 5px;
    font-size: 30px;
    width: 35px;
    display: inline-block;
    color: #3d9100;
  }
  .boxTwo {
    margin: 43px 0 0 72px;
    width: 490px;
    height: 55px;
  }
  .boxThree {
    margin: 18px 0 0 102px;
    width: 460px;
    height: 55px;
  }
  .boxFour {
    margin: 18px 0 0 69px;
    width: 495px;
    height: 55px;
  }
  .boxFive {
    margin: 18px 0 0 69px;
    width: 495px;
    height: 55px;
  }
  .boxSix {
    margin: 12px 0 0 48px;
    width: 745px;
    height: 55px;
  }
  .boxSeven {
    margin: 12px 0 0 12px;
    width: 780px;
    height: 55px;
  }
  .spanOne {
    display: inline-block;
    float: right;
    height: 19px;
    font-size: 25px;
    font-weight: 400;
    color: #666666;
    margin-right: 10px;
    line-height: 50px;
  }
  .spanTwo {
    display: inline-block;
    float: right;
    height: 19px;
    font-size: 25px;
    font-weight: 400;
    color: #666666;
    margin-right: 10px;
    line-height: 50px;
  }
  .spanThree {
    display: inline-block;
    float: right;
    height: 19px;
    font-size: 25px;
    font-weight: 400;
    color: #666666;
    margin-right: 8px;
    line-height: 50px;
  }
  .btnOne {
    display: inline-block;
    float: right;
    width: 169px;
    height: 53px;
    background: #f4f3f3;
    border: 1px solid #999999;
    border-radius: 10px;
    margin-left: 20px;
    line-height: 53px;
    text-align: center;
    font-weight: 400;
    font-size: 25px;
  }
  // .inputFive {
  //   width: 100px !important;
  //   height: 53px !important;
  //   border-radius: 10px;
  // }
  // .inputFive ::v-deep .el-input__inner {
  //   width: 100px !important;
  //   height: 53px !important;
  // }
  .inputSix {
    width: 258px !important;
    height: 53px !important;
    border-radius: 10px;
  }
  .inputSix ::v-deep .el-input__inner {
    width: 258px !important;
    height: 53px !important;
  }
  .inputSixs {
    float: right;
    width: 110px !important;
    height: 53px !important;
    border-radius: 10px;
  }
  .inputSixs ::v-deep .el-input__inner {
    width: 110px !important;
    height: 53px !important;
  }
  .inputSixs ::v-deep .el-input {
    float: right;
    width: 110px !important;
    height: 53px !important;
  }
  ::v-deep .el-input {
    float: right;
    width: 369px;
  }
  .inputboxSeven {
    margin-left: 5px;
    width: 89px !important;
    height: 53px !important;
    border-radius: 10px;
  }
  .inputboxSeven ::v-deep .el-input__inner {
    width: 89px !important;
    height: 53px !important;
  }
  ::v-deep .el-input__inner {
    display: inline-block;
    width: 369px;
    height: 53px;
    border: 1px solid #999999;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 400;
    color: #999999;
    line-height: 53px;
  }
  ::v-deep .el-input__suffix {
    .el-icon-circle-close:before {
      font-size: 32px;
      line-height: 70px;
      padding-right: 100px;
    }
  }
  .btn {
    margin: 34px 0 0 109px;
    width: 584px;
    height: 75px;
    background: linear-gradient(90deg, #5f20d4 0%, #2e68f6 100%);
    border-radius: 20px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    font-weight: bold;
    color: #fefefe;
  }
}
</style>